<template>
    <view>
        <view class="type-container">
            <scroll-view class="type-navbar" :scroll-x="true">
                <view class="type-box" v-for="(item, index) in catelist" :key="index">
                    <view :id="item.id" :class="'type-navbar-item ' + (activeCategoryId == item.id ? 'type-item-on' : '')" @tap="tabClick">
                        {{ item.name }}
                    </view>
                </view>
            </scroll-view>
        </view>

        <view class="container">
            <view class="news">
                <view class="newslist" v-for="(item, index) in newslist" :key="index">
                    <view class="pic" @tap="toNewsDetail" :data-id="item.id">
                        <image :src="item.thumb"></image>
                    </view>

                    <view class="title" @tap="toNewsDetail" :data-id="item.id">
                        <view>{{ item.title }}</view>
                        <view>{{ item.createtime }}</view>
                    </view>
                </view>
            </view>
            <!-- news end -->
        </view>
    </view>
</template>

<script>
import { News } from '../../model/news-model.js';
var news = new News();
export default {
    data() {
        return {
            cateid: 0,
            catelist: '',
            activeCategoryId: '',
            newslist: ''
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad: function (options) {
        this.onLoadClone3389(options);
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {
        uni.showNavigationBarLoading();
        this.onLoadClone3389({});
    },
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {
        var that = this;
        return {
            title: '职业资讯',
            path: '/pages/index/index'
        };
    },
    methods: {
        /**
         * 生命周期函数--监听页面加载
         */
        onLoadClone3389: function (options) {
            var that = this;
            uni.setNavigationBarTitle({
                title: '职业资讯'
            });
            var cateid = 0;
            if (options.hasOwnProperty('id')) {
                var cateid = options.id;
            }
            var params = {};
            news.GetNewsList((data) => {
                var catelist = data.catelist;
                if (cateid == 0) {
                    cateid = catelist[0]['id'];
                }
                that.setData({
                    // newslist:data.newslist,
                    catelist: catelist,

                    activeCategoryId: cateid
                });
                that.cateid = catelist[0]['id'];
                that.getnewslistdata();
                uni.hideNavigationBarLoading(); //完成停止加载
                uni.stopPullDownRefresh();
            }, params);
        },

        tabClick: function (e) {
            var pid = e.currentTarget.id;
            var that = this;
            that.cateid = pid;
            that.setData({
                activeCategoryId: that.cateid
            });
            that.getnewslistdata();
        },

        getnewslistdata: function () {
            var that = this;
            var params = {
                cateid: that.cateid
            };
            news.GetNewsListByCateId((data) => {
                // var catelist = data.catelist;
                that.setData({
                    newslist: data.newslist
                    //  catelist:catelist,
                    //  activeCategoryId:catelist[0]['id']
                });
            }, params);
        },

        toNewsDetail: function (e) {
            var id = e.currentTarget.dataset.id;
            uni.navigateTo({
                url: '/pages/articledetail/index?id=' + id
            });
        }
    }
};
</script>
<style>
/* index.wxss */
.container {
    background-color: #fff;
    min-height: 100%;
}

.type-container {
    width: 100%;
    height: 88rpx;
    background-color: #fff;
    overflow: hidden;
    border-bottom: 1rpx solid #f2f2f2;
    padding-bottom: 10rpx;
}

.type-navbar {
    white-space: nowrap;

    height: 88rpx;
    background-color: #fff;
}
::-webkit-scrollbar {
    width: 0;
    height: 0;
    color: transparent;
}
.type-box {
    width: 180rpx;
    box-sizing: content-box;
    font-size: 24rpx;
    line-height: 84rpx;
    text-align: center;
    display: inline-block;
    overflow: hidden;
    font-size: 14px;
    font-weight: bold;
}
.type-navbar-item {
    border-bottom: 4rpx solid #fff;
}
.type-item-on {
    border-bottom: 4rpx solid #3274e5;
}

.news {
    margin-top: 10rpx;
    width: 100%;
    background: #fff;
    display: flex;
    flex-direction: column;
}
.news .newstitle {
    width: 720rpx;
    height: 40rpx;
    line-height: 40rpx;
    margin-left: 20rpx;
    font-size: 0.7rem;
    border-bottom: 1rpx solid #ccc;
    margin: 0 auto;
}

.news .newslist {
    display: flex;
    flex-direction: row;
    width: 720rpx;
    margin: 0 auto;
    border-bottom: 1px solid #f2f2f2;
    padding-top: 20rpx;
    padding-bottom: 20rpx;
}

.news .newslist .pic {
    width: 30%;
    height: 180rpx;
    line-height: 180rpx;
    align-items: center;
    justify-content: center;
    display: flex;
}
.news .newslist .pic image {
    width: 250rpx;
    height: 150rpx;
}

.news .newslist .title {
    width: 60%;
    flex-direction: column;
    display: flex;
    height: 150rpx;
    justify-content: space-between;
}
.news .newslist .title view {
    padding-left: 5%;
    text-align: left;
}

.news .newslist .title view:nth-child(1) {
    font-size: 0.8rem;
    height: 40rpx;
    line-height: 40rpx;
}
.news .newslist .title view:nth-child(2) {
    font-size: 0.7rem;
    height: 20rpx;
    line-height: 20rpx;
}
</style>
